import Taro, { Component } from '@tarojs/taro'
import {View, Button, Text, Input, Icon, ScrollView} from '@tarojs/components'
import './myPage.scss'
import {AtTabBar, AtTabs, AtTabsPane} from 'taro-ui'
import {getfirts_order} from '../../mode/firstOrder'
import taroUtils from "../../utils/taroUtils";
import Recommend from "../../components/recommend/recommend";
import {NumToPx} from "../../utils/utils";
import {getHomeItemData} from "../../mode/homeCtr";
class MyPage extends Component{

  config = {
    navigationBarTitleText: '礼金商品'
  }

  constructor() {
    super();
    this.state={
      searchScrollviewHeight:450,
      current:0,
      orders:[
        {title:"礼金金额倒序",orderId :1,items:[],mid:1},
        {title:"佣金金额倒序",orderId :2,items:[],mid:1},
        {title:"销量倒序",orderId :3,items:[],mid:1},
        {title:"券后价倒序",orderId :4,items:[],mid:1},
        {title:"券金额倒序",orderId :5,items:[],mid:1},
      ]
    }
  }

  componentWillMount() {
    console.log('componentWillMount')


  }


  componentDidMount() {
    this.handleItemClick(0)
    console.log('componentDidMount')
  }

  componentWillUnmount() {
    console.log('componentWillUnmount')
  }


  componentDidShow() {
    console.log('componentDidShow')
    // this.getHeight()
  }

  componentDidHide() {
    console.log('componentDidHide')
  }


  /*
  * 排序
  * */
  handleItemClick=(value)=>{
      this.setState({
        current:value
      })
      if ( this.state.orders[value].items.length > 0)return;
      this.getData(this.state.orders[value],null)
  }

  getData=(tp,ui)=>{
    getfirts_order(tp.mid,0,tp.orderId).then(res=>{
      if (res === null)return

      tp.items = tp.items.concat(res.data)
      tp.mid = res.pageIndex

      var TpIndex = 0
      this.state.orders.map((or,index)=>{
          if (or.orderId === tp.orderId)
            TpIndex = index
      })
      var orders =  this.state.orders
      orders[TpIndex] = tp

      this.setState({
        orders:orders,
      },()=>{
        if (ui !== null)
          ui.RefData(true)
      })
    })
  }

  // getHeight(){
  //   var  temp = 0
  //   taroUtils.GetScrollViewSurplusContain(this,".sroView").then((height)=>{
  //     // console.log(height)
  //
  //     this.setState({
  //       searchScrollviewHeight:height + 60
  //     })
  //   })
  // }

  /**
   * 更多
   * */
  ToLowerEvent=(ui,item)=>{
    this.getData(item,ui)
  }

  createView(item,h){
    return(<View>
      <Recommend   list={item.items} height={NumToPx(h)} ToLowerEvent={(t)=>{
        this.ToLowerEvent(t,item)
      }} />
    </View>)
  }

  render () {
    var h = 750//this.state.searchScrollviewHeight
    return (
      <View className={'home'}>
        <View className={'sroView'}>
          <AtTabs
            current={this.state.current}
            scroll
            tabList={this.state.orders}
            onClick={this.handleItemClick.bind(this)}
          >
            <AtTabsPane current={this.state.current} index={0}>
              {this.createView(this.state.orders[0],h)}
            </AtTabsPane>
            <AtTabsPane current={this.state.current} index={1}>
              {this.createView(this.state.orders[1],h)}
            </AtTabsPane>
            <AtTabsPane current={this.state.current} index={2}>
              {this.createView(this.state.orders[2],h)}
            </AtTabsPane>
            <AtTabsPane current={this.state.current} index={3}>
              {this.createView(this.state.orders[3],h)}
            </AtTabsPane>
            <AtTabsPane current={this.state.current} index={4}>
            {this.createView(this.state.orders[4],h)}
            </AtTabsPane>

          </AtTabs>
        </View>
      </View>
    )
  }
}

export  default MyPage
